/*
 * @Description:
 * @Author: 韩双双
 * @Date: 2021-04-22 21:03:42
 * @LastEditTime: 2021-04-29 13:14:54
 * @LastEditors: 韩双双
 */
import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import styles from './Articleall.less';
import SwiperCore, {  Pagination, Autoplay } from 'swiper';
// import './swiper/components/autoplay';
import 'swiper/components/pagination/pagination.min.css';
import {useHistory} from 'umi';

SwiperCore.use([Autoplay]);

function Articleall() {
    let { article } = useStore()
    let history = useHistory()
    
    const renderItem =(ID:string)=>{
        // article.getarticleDetail(ID)
        history.push(`/index/Details/${ID}`)
    }
    return (
        <Swiper
            className={styles.hers}
            autoplay={true}
            pagination={{ clickable: true }}
        >{
            article.recommendSwiper&&article.recommendSwiper.map((item:any)=>{
            return  <SwiperSlide 
            key={item.id} 
            className={styles.slice}
            onClick={()=>renderItem(item.id)}
            >
                {item.title}<img src={item.cover} alt=""/>
                </SwiperSlide>
            })
        } 
        </Swiper>
    )
}
export default observer(Articleall)